import * as echarts from 'echarts'

/**
 * @description 绘制折线图
 * @param {HTMLElement} dom
 * @param {Array} xData -渲染参数
 * @param {Array} yData -渲染参数
 */
function drewLine(
  dom = '',
  xData,
  yData,
) {
  if (!dom || !xData || !xData.length) return
  /**
   * @see https://echarts.apache.org/examples/zh/editor.html?c=area-basic
   */
  const lineChart = echarts.init(dom)
  const option = {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '5%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#99a8b0',
          width: 2,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#99a8b0',
        formatter(value) {
          return value.slice(-2)
        },
      },
      data: xData.map(item => item.replace(/\//g, '-')),
    },
    yAxis: {
      minInterval: 1,
      type: 'value',
      axisLabel: {
        color: '#99a8b0',
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#99a8b0',
        },
      },
      boundaryGap: [0, '10%'],
    },
    series: [
      {
        data: yData,
        type: 'line',
        itemStyle: {
          color: '#2B74E5',
        },
        smooth: true,
        areaStyle: {
          opacity: 0.2,
        },
      },
    ],
  }

  lineChart.setOption(option)

  window.addEventListener('resize', () => {
    lineChart.resize()
  })
}

export { drewLine }
